<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../common/jquery-3.7.1.js"></script>
    <title>人员排班</title>
    <style>
        html, body {
            background-color: rgba(23, 23, 26, 1);
            height: 100%;
            margin: 0;
        }
        .title {
            text-align: center;
            margin: 0 auto;
            width: 100%;
            color: #68d8fe;
            display: flex;
            justify-content: center;
            font-size: 3vw;
            padding-top: 1vw;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            height: 95%;
        }
        thead {
            height: 6%;
        }
        tbody tr td {
            border: 1px solid  rgb(59, 59, 61);
            text-align: center;
        }
        th {
            color: #fff;
            font-weight: 100;
        }
        td{
            height: 16%;
        }
        .other-month {
            color: #ccc; /* 灰色显示 */
        }
        .jobForeman{
            background-color: rgb(1, 166, 240);
        }
        .sorter{
            background-color: rgb(112, 182, 1);
        }
        .distributionPersonnel{
            background-color: rgb(122, 77, 19);
        }
        .team-leader {
            color: blue;
        }
        .sorter {
            color: green;
        }
        .delivery {
            color: red;
        }
        .legend1{
            margin-bottom: 1vw;
        }
        .legend span,.legend1 span{
            color: #fff;
            padding: .1vw .6vw;
            margin-left: .9vw;
            border-radius: 50%;
        }

        .flex-center{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: .7vw;
        }
        .dateTime {
            color: #fff;
        }
        .selected{
            background-color: rgb(67, 67, 70);
            color: rgb(75, 90, 154);
            border-radius: .2vw;
        }
        .noselected{
            color: #fff;
        }
        .week{
            height: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="title">人员排班</div>
    <div class="legend1">
        <span class="jobForeman">班组长</span>
        <span class="sorter">分拣人员</span>
        <span class="distributionPersonnel">配送人员</span>
    </div>
    <div style="border: rgb(59, 59, 61) solid .1vw;height: 84%;">
        <div style="display: flex;justify-content: center;padding-top: .7vw;">
            <div style="display: flex;width: 90%;justify-content: space-between;">
                <div style="display: flex;height: 2vw;">
                    <div class="flex-center" style="background-color: rgb(55, 55, 57);width: 2vw;border-radius: 50%;"><button style="background-color: transparent;border: 0px;" onclick="minusMonth()"><</button></div>
                    <div class="flex-center dateTime year">2020</div>
                    <div class="flex-center dateTime">年</div>
                    <div class="flex-center dateTime month">02</div>
                    <div class="flex-center dateTime">月</div>
                    <div class="flex-center" style="background-color: rgb(55, 55, 57);width: 2vw;border-radius: 50%;"><button style="background-color: transparent;border: 0px;" onclick="addMonth()">></button></div>
                    <div class="flex-center dateTime" style="background-color: rgb(38, 38, 41);padding: 0 .7vw;"><button style="background-color: transparent;border: 0px;color: #fff;" onclick="into()">今天</button></div>
                </div>
                <div style="border-radius: .2vw;display: flex;background-color: rgb(41, 41, 44);justify-content: center;align-items: center;">
                    <div style="padding: 0 .7vw;margin-left: .4vw;" class="selected">月</div>
                    <div style="padding: 0 .7vw;margin-right: .4vw;" class="noselected">年</div>
                </div>
            </div>
        </div>

        <table id="calendar">
            <thead>
                <tr>
                    <th><div class="week">周日</div></th>
                    <th><div class="week">周一</div></th>
                    <th><div class="week">周二</div></th>
                    <th><div class="week">周三</div></th>
                    <th><div class="week">周四</div></th>
                    <th><div class="week">周五</div></th>
                    <th><div class="week">周六</div></th>
                </tr>
            </thead>
            <tbody>
                <!-- 日历内容将通过JavaScript动态生成 -->
            </tbody>
        </table>
    </div>
    <script>
        //month  0-11
        function updateCalendar(month,year) {
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);
            const daysInMonth = lastDay.getDate();
            const startDay = firstDay.getDay();

            const prevMonthLastDay = new Date(year, month, 0).getDate();
            const nextMonthFirstDay = new Date(year, month + 1, 1);

            let calendarBody = document.querySelector('#calendar tbody');
            calendarBody.innerHTML = '';

            let date = 1;
            let prevMonthDate = prevMonthLastDay - startDay + 1;
            let nextMonthDate = 1;

            for (let i = 0; i < 6; i++) {
                let row = document.createElement('tr');
                for (let j = 0; j < 7; j++) {
                    let cell = document.createElement('td');
                    if (i === 0 && j < startDay) {
                        cell.textContent = prevMonthDate;
                        cell.innerHTML = `
                            <div style="width: 100%;height: 100%;margin-top: .3vw;">
                                <div style="width: 30%;color: rgb(77, 79, 75);padding-left: 1vw;">${prevMonthDate}</div>
                            </div>
                        `;
                        cell.classList.add('other-month');
                        prevMonthDate++;
                    } else if (date > daysInMonth) {
                        cell.textContent = nextMonthDate;
                        cell.innerHTML = `
                            <div style="width: 100%;height: 100%;margin-top: .3vw;">
                                <div style="width: 30%;color: rgb(77, 79, 75);padding-left: 1vw;">${nextMonthDate}</div>
                            </div>
                        `;
                        cell.classList.add('other-month');
                        nextMonthDate++;
                    } else {
                        cell.textContent = date;
                        // 添加班组长、分拣人员、配送人员的显示逻辑
                        cell.innerHTML = `
                            <div style="width: 100%;height: 100%;display: flex;justify-content: space-around;margin-top: .3vw;">
                                <div style="width: 30%;color: #fff;">${date}</div>
                                <div class="legend"  style="width: 50%;display: flex;flex-direction: column;justify-content: space-around;">
                                    <span class="jobForeman">张三</span>
                                    <span class="sorter">李四</span>
                                    <span class="distributionPersonnel">王五</span>
                                </div>
                            </div>
                        `;
                        date++;
                    }
                    row.appendChild(cell);
                }
                calendarBody.appendChild(row);
                if (date > daysInMonth && nextMonthDate > 7) {
                    break;
                }
            }
        }

        function addMonth(){
            let month = parseInt($('.month').html());
            let year = parseInt($('.year').html());
            if(month==12){
                year++;
                month=1;
            }else{
                month++;
            }
            var monthValue=month-1;
            updateCalendar(monthValue,year);
            $('.month').html(month.toString().padStart(2, '0'))
            $('.year').html(year);
        }

        function minusMonth(){
            let month = parseInt($('.month').html());
            let year = parseInt($('.year').html());
            if(month==1){
                year--;
                month=12;
            }else{
                month--;
            }
            var monthValue=month-1;
            updateCalendar(monthValue,year);
            $('.month').html(month.toString().padStart(2, '0'))
            $('.year').html(year);
        }

        function into(){
            let currentDate = new Date();
            let currentYear = currentDate.getFullYear();
            let currentMonth = currentDate.getMonth(); // getMonth() 返回 0-11
            $('.month').html((currentMonth+ 1).toString().padStart(2, '0'))
            $('.year').html(currentYear);
            updateCalendar(currentMonth,currentYear);
        }

        document.addEventListener('DOMContentLoaded', function() {
            into();
        });
    </script>
</body>
</html>